<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path;
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>人力资源-修改培训项目</title>
<script type="text/javascript" src="<%=basePath %>/resource/js/common-css-js.js" charset="UTF-8"></script>
<style>
	body {
		padding: 20px;
	}
</style>
</head>
<body>
	<form class="layui-form" id="delform">
	  <input type="hidden" name="trainId">
	  <div class="layui-form-item">
	    <label class="layui-form-label">培训开始时间</label>
	    <div class="layui-input-block">
	      <input id="startDate" type="text" lay-verify="require|date" name="trainStartDate" placeholder="开始时间" autocomplete="off" class="layui-input">
	    </div>
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label">培训结束时间</label>
	    <div class="layui-input-block">
	      <input id="endDate" type="text" lay-verify="require|date" name="trainEndDate" placeholder="结束时间" autocomplete="off" class="layui-input">
	    </div>
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label">培训类型</label>
	    <div class="layui-input-block">
	      <input type="text" name="trainType" lay-verify="required|chineseStr" placeholder="培训类型" autocomplete="off" class="layui-input">
	    </div>
	  </div>
	  
	  <div class="layui-form-item">
	    <label class="layui-form-label">培训内容描述</label>
	    <div class="layui-input-block">
	      <input type="text" name="trainDescription" lay-verify="required" placeholder="培训内容简述" autocomplete="off" class="layui-input">
	    </div>
	  </div>
	  <input type="hidden" name="trainShouldPeoples">
      <div class="layui-form-item">
        <div class="layui-form-item">
	    	<label class="layui-form-label">培训状态</label>
	    	<div class="layui-input-block">
		    	<input type="radio" name="trainingStatusRadio" value="1" title="未开始">
				<input type="radio" name="trainingStatusRadio" value="2" title="进行中">
				<input type="radio" name="trainingStatusRadio" value="3" title="已结束">
				<input type="radio" name="trainingStatusRadio" value="4" title="重安排">
		    </div>
		</div>
	  </div>
	  <div class="layui-form-item">
        <div class="layui-form-item">
	    	<label class="layui-form-label">参与员工</label>
	    	<div class="layui-input-block">
		      <input lay-filter="tempParticipateEmployee" type="radio" name="trainParticipateEmployee"  value="allStaff" title="全体员工">
			  <input lay-filter="tempParticipateEmployee" type="radio" name="trainParticipateEmployee"  value="allGirl" title="全体女员工">
			  <input lay-filter="tempParticipateEmployee" type="radio" name="trainParticipateEmployee"  value="allMan" title="全体男员工">
			  <input id="selectStaff" class="layui-btn" type="button" value="自行选择" >
			  <input id="selectStaffReset" class="layui-btn" type="button" value="重置" >
		    </div>
		</div>
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label">应到参加人数</label>
	    <div class="layui-input-block">
	      <input type="text" name="trainShouldPeoples" lay-verify="intNumber" placeholder="应到参加人数" autocomplete="off" class="layui-input">
	    </div>
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label">实到参加人数</label>
	    <div class="layui-input-block">
	      <input type="text" name="trainActualPeoples" lay-verify="intNumber" placeholder="实到参加人数" autocomplete="off" class="layui-input">
	    </div>
	  </div>
	  <div class="layui-form-item">
	    <label class="layui-form-label">培训地点</label>
	    <div class="layui-input-block">
	      <input type="text" name=trainAddress lay-verify="required" placeholder="培训地点" autocomplete="off" class="layui-input">
	    </div>
	  </div>
	  <%@include file="/admin/commonsPage/submit-reset.html" %>
	</form>
	<script type="text/javascript">
		//用来存储,选择员工的dom结构
		var selectStaffElement = "";
		//用来存储选中的id号码
		var selectStaffIds = [];
		//存储全体女员工id
		var idsOfWomen = [];
		//存储全体男员工id
		var idsOfMan = [];
		//存储全体员工id
		var idsOfStaff = [];
		//用来记录是否选中了radio
		var flag = false;
		//接收父iframe传过来的值
		function setSelectStaffIds(value){
			selectStaffIds = value;
		}
		//设置三个radio禁止
		function setRadioDisabled(){
			for(var item_id = 0;item_id<3;item_id++){
				$($("input[name='trainParticipateEmployee']")[item_id]).attr("disabled",true);
			}
		}
		
		$.ajax({
			type: 'get',
			url: path+"/human-resource/staff-files",
			success: function(msg){
				for(var item_staff = 0;item_staff<msg.length;item_staff++){
					//取出女员工id
					if(msg[item_staff].empSex === "女"){
						idsOfWomen[idsOfWomen.length]=msg[item_staff].empId;
					}else{//取出男员工id
						idsOfMan[idsOfMan.length] = msg[item_staff].empId;
					}
					//添加到全体员工id中
					idsOfStaff[item_staff] = msg[item_staff].empId;
					selectStaffElement+="<label><input name='item_staff' type='checkbox' empId='"+msg[item_staff].empId+"' value='"+msg[item_staff].empName+"'/>"+msg[item_staff].empName+"&nbsp</label>";
				}
			}
		})
		  //执行一个laydate实例
		  laydate.render({
			  elem: '#startDate'
			  ,type: 'datetime'
		  });
		  laydate.render({
			  elem: '#endDate'
			  ,type: 'datetime'
		  });
		  //弹出选择员工窗口
		  $("#selectStaff").click(function(){
			  layer.open({
				  content: selectStaffElement,
				  yes: function(index, layero){//点击确认的时候触发
					var checkboxOfCheckedArray = layero.find("input[name='item_staff']:checked");
					for(var item_checkbox = 0;item_checkbox<checkboxOfCheckedArray.length;item_checkbox++){
						selectStaffIds[item_checkbox] = $(checkboxOfCheckedArray[item_checkbox]).attr("empId");
					}
					//大于0代表有自行选择员工
					if(selectStaffIds.length>0){
						//如果选择了自定义员工则禁用三个按钮
						setRadioDisabled();
						form.render('radio');
					}
				    layer.close(index);
				  },//数据回现,窗口弹出的时候触发
			  	  success: function(layero, index){
			  		//判断是否有id值,有则回现数据
			  		if(selectStaffIds.length>0){
			  			for(var item_empId = 0;item_empId<selectStaffIds.length;item_empId++){
			  				var checkedElements = layero.find("input[empId='"+selectStaffIds[item_empId]+"']");
			  				checkedElements.attr("checked",true);
			  			}
			  		}
				  }
			  }); 
			  //重置按钮
			  $("#selectStaffReset").click(function(){
				  for(var item_id = 0;item_id<3;item_id++){
					//取消掉禁止选择
					$($("input[name='trainParticipateEmployee']")[item_id]).attr("disabled",false);
				  }
				  selectStaffIds.splice(0,selectStaffIds.length);//清空数组
				  //清空按钮的禁止使用属性样式
				  $("#selectStaff").removeClass("layui-btn-disabled");
				  //清空radio的选中属性
				  $("input[name='trainParticipateEmployee']").attr("checked",false);
				  //重新渲染
				  form.render();
			  })
			  //监听radio 取消 选中 操作
			  form.on('radio(tempParticipateEmployee)', function(data){
				  //定义了一个标记,默认是false
				  if(flag === true){
					  //为true代表之前有点击过一次,所以就是第二次点击radio
					  flag = false;
					  //第二次点击即为取消,对radio的checked(选中)属性设置为false
					  $(data.elem).attr("checked",false);
					  //删除 自行选着 按钮的 disabled Class属性样式(禁止使用属性)
					  $("#selectStaff").removeClass("layui-btn-disabled");
					  $("#selectStaff").attr("disabled",false);
					  //重新渲染radio
					  form.render('radio');
					  return;
				  }
				  //第一次点击,给 自行选着 按钮添加 禁止使用的样式Class
				  $("#selectStaff").addClass("layui-btn-disabled");
				  $("#selectStaff").attr("disabled",true);
				  //设置为true 下次点击即为取消
				  flag = true;
			  });
			//监听提交
			form.on('submit(submitForm)', function(data){
			  //获取到被选中的radio的DOM结构对象
			  var checkedOfRadio = $("input[name='trainParticipateEmployee']:checked");
			  var tempValue = data.field.trainParticipateEmployee;
			  if(typeof(tempValue)!=="undefined"&&tempValue!==''){
				//从DOM结构对象中获取到该radio的值
				/*
				更换掉之前的trainParticipateEmployee值,因为父页面中会更具name=participateEmployee
				覆盖掉当前这个页面的值,所以需要在前面加个temp,
				然后等值都封装好后,在对data.field进行participateEmployee的增加
				*/
				data.field.participateEmployee = tempValue;
				switch(tempValue){
					//根据值来判断使用哪一个数组
					case "allMan":
						data.field.trainShouldPeoples = idsOfMan.length;
						data.field.trainParticipantsId = idsOfMan.join(",");
					  break;
					case "allGirl":
						data.field.trainShouldPeoples = idsOfWomen.length;
						data.field.trainParticipantsId = idsOfWomen.join(",");
					  break;
					case "allStaff":
						data.field.trainShouldPeoples = idsOfStaff.length;
						data.field.trainParticipantsId = idsOfStaff.join(",");
				}
			  }else{//当radio都没有选着的情况下就使用自行选着的数组
				  data.field.trainShouldPeoples = selectStaffIds.length;
				  data.field.trainParticipantsId = selectStaffIds.join(",");
			  }
			  if(data.field.trainShouldPeoples!==0){
				  //对包装的对象值进行修补,因为trainingStatus在赋值时如果使用该单词做name会
				  //造成冲突,所以需要在值 获取和回现完成之后再进行 封装
				  data.field.trainStatus = data.field.trainingStatusRadio;
				  //数据筛选好后发送ajax请求
				  data.field._method = "put";
				  $.ajax({
					   type: 'put',
					   url: path+"/human-resource/staff-train",
					   data: data.field ,
					   contentType: "application/x-www-form-urlencoded;charset='UTF-8'", 
					   error: function(XMLHttpRequest, textStatus, errorThrown) {
						   fixedAlert("修改失败!",2);
					   },
					   success: function(msg){
						   fixedAlert("修改成功!",1,true);
					   }
			       })
			  }else if(data.field.trainShouldPeoples===0 &&data.field.trainParticipateEmployee==="allGirl"){
				  
				  fixedAlert("公司暂时未录入女性员工!",0);
				  
			  }else if(data.field.trainShouldPeoples===0 &&data.field.trainParticipateEmployee==="allMan"){
				  
				  fixedAlert("公司暂时未录入男性员工!",0);
				  
			  }else if(data.field.trainShouldPeoples===0 &&data.field.trainParticipateEmployee==="allStaff"){
				  
				  fixedAlert("公司暂时未录入员工!",0);
				  
			  }else{
				  fixedAlert("请选择参加的人员!",0);
			  }
			  return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
			});
			form.render('radio');
			form.render();
		 });
	</script>
</body>
</html>